<template>
  <!-- 资料管理 -->
  <div class="body dataManage">
    <div class="titleBox">
      <img src="../../assets/projectDescription.png" alt="" class="titlebg" />
      <p class="title">资料管理</p>
    </div>
    <div class="main" @click="$emit('dataFun', true)">
      <div id="myChart" class="myChart"></div>
    </div>
  </div>
</template>
<script>
import api from "@/util/api";
export default {
  name: "dataManage",
  data() {
    return {
      msg: "dataManage",
      orgOptions: {
        title: {
          text: "本月归档文件数量",
          textStyle: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        legend: {
          orient: "vertical", //垂直显示
          x: "right", //居右显示
          align: "left",
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          show: false,
          height: "120",
          width: "240",
          // width:"100%",
          // height: "100%",
          right: "26%",
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "会议纪要", "设计变更", "设计图纸", "现场联络单"],
            ["7月", 43.3, 85.8, 93.7, 93.7],
          ],
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
          },
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
          },
        },
        series: [],
      },
    };
  },
  methods: {
    // 绘制图表
    drawLine() {
      console.log(this.orgOptions);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption(this.orgOptions);
    },

    /** API */
    // 获取图表数据
    dataIndexShow() {
      api.dataIndexShow({}, (res) => {
        this.orgOptions.dataset.source = res.data.data.table;
        for (let i = 1; i < res.data.data.table[1].length; i++) {
          this.orgOptions.series.push({ type: "bar" });
        }
        this.drawLine();
      });
    },
  },
  mounted() {
    this.dataIndexShow();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.dataManage {
  width: 100%;
  height: 100%;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    //  height: 20%;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      //  height: 100%;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 62px);
    // height: 80%;
    padding: 20px;
    box-sizing: border-box;
    .myChart {
      width: 100%;
      height: 100%;
      color: #fff;
    }
  }
}
</style>
